<template>


  <div>

    <!--列表-->
    <el-card style="">

      <!--左右布局容器-->
      <el-row :gutter="20">
        <el-col :span="12">

          <el-input
              placeholder="输入关键字进行过滤"
              size="mini"
              v-model="filterText">
          </el-input>
          <br/>
          <br/>

          <!-- 节点树-->
          <!--
            indent 是防止树之间的间隔太大，这里要加样式才需要这个
            accordion 同一个节点，一次只能打开一个，防止树太大
          -->
          <el-tree
              class="tree-line" :indent='0'
              :data="tree.dataTree"
              default-expand-all
              node-key="id"
              accordion
              @node-click="handleNodeClick"
              :filter-node-method="filterNode"
              :highlight-current="tree.highlightSelect"
              :check-on-click-node="tree.checkClick"
              :expand-on-click-node="tree.expandClickNode"
              ref="treeAuth"
          >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
            <span>
              &nbsp;
              <el-button
                  type="text"
                  size="mini"
                  @click="() => openSaveBefore(data)">
                新增
              </el-button>
              <el-button
                  type="text"
                  size="mini"
                  @click="() => openUpdBefore(data)">
                修改
              </el-button>
              <el-button
                  type="text"
                  size="mini"
                  @click="() => delTips(node, data)">
                删除
              </el-button>
            </span>
          </span>
          </el-tree>

        </el-col>
        <el-col :span="10" class="border-row-el">

          <!--查部分-->
          <el-form ref="form" :model="submitData" label-width="150px" size="mini">
            <br/>
            <el-form-item label="权限名称" prop="name">
              <el-input v-model.trim="submitData.name" disabled />
            </el-form-item>

            <el-form-item label="权限代码" prop="code">
              <el-input v-model.trim="submitData.code" disabled />
            </el-form-item>

            <el-form-item label="权限说明" prop="description">
              <el-input type="textarea" v-model.trim="submitData.description" disabled />
            </el-form-item>


            <!--<el-form-item label="上级权限ID" prop="parentId">-->
            <!--  <el-input v-model.trim="submitData.parentId" disabled />-->
            <!--</el-form-item>-->

            <el-form-item label="权限类型" prop="type">
              <el-input v-if="submitData.type === 1" value="菜单" disabled />
              <el-input v-else-if="submitData.type === 2" value="按钮" disabled />
              <el-input v-else-if="submitData.type === 3" value="页面" disabled />
              <el-input v-else-if="submitData.type === 4" value="链接" disabled />
              <el-input v-else-if="submitData.type === 9" value="其他" disabled />
            </el-form-item>

          </el-form>

        </el-col>
      </el-row>

    </el-card>

    <AuthoritySaveUpd ref="OpsAuthoritySaveUpdRef" @getPowerTree="getPowerTree"/>

  </div>

</template>


<script>

import http from '@/utils/http'
import AuthoritySaveUpd from './AuthoritySaveUpd'


export default {
  name: "AuthorityList",
  components: {
    AuthoritySaveUpd
  },
  data() {
    return {
      // 提交的数据
      submitData:{
        id: null,
        name: null,
        description: null,
        code: null,
        parentId: null,
        parentIds: null,
        type: null,
      },
      // 搜索过滤树
      filterText: '',
      // 权限树相关的配置
      tree: {
        // 权限树
        dataTree: [],
        // 是否高亮选中
        highlightSelect: true,
        // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
        checkClick: false,
        // 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
        expandClickNode: false,
      },
      // 查询条件
      searchOpsAuthorityParam:{
        // name: null,
        // code: null,
      }
    }
  },
  watch: {
    /**
     * 监听值的变化
     * @param val 发生变化的数据
     */
    filterText(val) {
      this.$refs.treeAuth.filter(val);
    }
  },
  methods: {
    /**
     * 节点被点击时的回调
     * @param data 当前被选中的节点
     */
    handleNodeClick(data){
      this.submitData = data
    },
    /**
     * 过滤查询树
     * @param value 要过滤的值，查询的数据
     * @param data 当前节点数据
     * @param node 节点信息
     * @return {boolean}  返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
     */
    filterNode(value, data, node) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    /**
     * 打开保存的弹框
     */
    openSaveBefore(obj) {
      this.$refs.OpsAuthoritySaveUpdRef.init('save', obj)
    },
    /**
     * 打开修改之前的的弹出框
     * @param obj 修改的值
     */
    openUpdBefore(obj) {
      this.$refs.OpsAuthoritySaveUpdRef.init('upd', obj)
    },
    /**
     * 删除之前的提示框
     * @param obj 要删除的数据
     */
    delTips(node, obj) {
      this.$confirm('是否执行删除, 删除后无法恢复，是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        // 确定删除
        this.delOpsAuthority(node, obj)

      }).catch(() => {
        // 取消删除
      });
    },
    /**
     * 删除
     * @param obj 要删除的数据
     */
    delOpsAuthority(node, obj) {
      http.post("/power/delPower", {
        id: obj.id,
      }).then(response => {
        let res = response.data;
        if (!res.success) {
          // 401是token过期跳转的
          if (res.code !== 401) {
            this.$message.error(res.msg);
          }
          return
        }

        // 删除节点的逻辑
        // const parent = node.parent;
        // const children = parent.data.children || parent.data;
        // const index = children.findIndex(d => d.id === data.id);
        // // 回调函数,删除节点
        // children.splice(index, 1);

        this.getPowerTree()
        this.$message.success("删除成功");

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 重置查询条件
     */
    resetQuery() {
      this.searchOpsAuthorityParam = {
        name: null,
        code: null,
      }
    },
    /**
     * 获取权限树
     */
    getPowerTree() {
      http.post("/power/getAvailableForAuth", this.searchOpsAuthorityParam).then(response => {
        let res = response.data;
        if (!res.success) {
          // 401是token过期跳转的
          if (res.code !== 401) {
            this.$message.error(res.msg);
          }
          return
        }
        // 表格数据
        this.tree.dataTree = res.data

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
  },
  // 进入马上执行
  mounted() {
    this.$store.commit('navigationListChange', [
      {name: '权限', url: '/toAuthorityList', query: {}}
      // {name: '场所详情', url: '/toSiteLayout', query: {siteId: this.$route.query.siteId}},
    ])
    this.getPowerTree()
  },
}
</script>

<style >

/*
添加虚线 start
需要去掉 style 去掉scoped
需要在 el-tree 上添加 class="tree-line" :indent='0' 这2个属性
*/

/*缩进量*/
.tree-line .el-tree-node {
  position: relative;
  padding-left: 16px;
}

/*缩进量*/
.tree-line .el-tree-node__children {
  padding-left: 16px;
}

/*竖线*/
.tree-line .el-tree-node::before {
  content: '';
  height: 100%;
  width: 1px;
  position: absolute;
  left: -3px;
  top: -26px;
  border-width: 1px;
  border-left: 1px dashed #52627c;
}

/*当前层最后一个节点的竖线高度固定*/
.tree-line .el-tree-node:last-child::before {
  height: 38px;
}

/*横线*/
.tree-line .el-tree-node::after {
  content: '';
  width: 24px;
  height: 20px;
  position: absolute;
  left: -3px;
  top: 12px;
  border-width: 1px;
  border-top: 1px dashed #52627c;
}

/*去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了*/
.tree-line > .el-tree-node::after {
  border-top: none;
}
.tree-line > .el-tree-node::before {
  border-left: none;
}

/*展开关闭的icon*/
.tree-line .el-tree-node__expand-icon {
  font-size: 16px;
}
/*叶子节点（无子节点）*/
.tree-line .el-tree-node__expand-icon.is-leaf {
  color: transparent;
}

/*
添加虚线 end
需要去掉 style 去掉scoped
*/

</style>
